@import "colors";

.directory-tree {
  $icon-size: 20px;
  $icon-text-margin: 3px;

  &:not(:last-child) {
    margin-top: 1px;
  }

  .directory-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: $icon-size;

    .name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 2px;
      padding: 2px $icon-text-margin;

      &:hover {
        color: white;
        background-color: $color-selected;
        cursor: pointer;
      }
    }

    .directory-icon-wrapper {
      width: $icon-size;
      height: $icon-size;
      transition: background-color 100ms;
      border-radius: 2px;
      line-height: $icon-size;
      text-align: center;

      &.placeholder .fa {
        visibility: hidden;
      }

      .fa {
        font-size: 0.8em;
      }

      .fa.expand-collapse {
        transition: transform 100ms;

        &.is-expanded {
          transform: rotate(90deg);
        }
      }

      &:not(.placeholder):not(.disabled):hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.1);
      }

      &.disabled {
        color: $color-text-faded;
      }
    }

    &.is-selected .name {
      color: white;
      background-color: $color-selected;
    }
  }

  > .children {
    padding: 2px 0 2px $icon-size + $icon-text-margin;

    &.loaded {
      margin: 0;
    }

    &.loading {
      font-style: italic;
      color: lighten($color-text-faded, 30%);
    }
  }
}
